<template>


  <!-- <nav>
    <router-link to="/">Home</router-link> |
    <router-link to="/about">About</router-link> |
    <router-link to="/myck" @click="setcountadd">myck</router-link>
  </nav> -->
  <!-- <mbx></mbx>  -->
  <div class="c-inext" >
  <leftnav v-if="paths != '/login'"></leftnav>
  <info class="index-infon" v-if="paths != '/login'"></info>
  <router-view/>
  </div>

</template>
<script>
import mbx from '@/views/breadcrumb.vue'
import leftnav from '@/components/leftnav.vue'
import info from '@/views/info/info.vue'
import {ref,reactive} from "vue";
import { useRouter,useRoute} from 'vue-router'
　import {mapState,mapMutations,mapActions,mapGetters} from 'vuex';
export default {
  setup(){
    const paths=ref('')
    const router = useRouter()
    router.beforeEach((to,form,next) => {
        console.log(to.path)
        paths.value=to.path
        next()
      });
    // paths.value=router.currentRoute.value.path
    console.log('paths',router)

    return{
      paths
    }

  }
  ,

  data(){
         return{
         path:'',
        
         }
     },
  created(){
     this.path = this.$route.path;
  },
  mounted(){
    console.log(this)

  },
  methods:{
    // 两种方式使用
    ...mapMutations(["setcountadd"]),
    addcount(){
      this.$store.commit('setcountadd')
    },
  },
  watch:{
    
    $route(to,from){
         this.path = to.path
         console.log(this.path)
         }
    },
    components:{
       leftnav,
       mbx,
       info,
    }
    
}
</script>

<style lang="scss">
*{
  -webkit-touch-callout: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.c-inext{
  display: flex;
  position: relative;
  width: 1900px;
  margin: 0 auto;
  overflow: hidden;
  
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
#app {
  background: #F2F5FA;
  padding-top: 0;
  margin: 0 auto;
}
a,ul,li,p,body,ol,h1,h2,h3,h4,h5{
padding: 0;
margin: 0;
list-style: none;
}
body{
  width: 100%;
  height: 100%;
  background: #F2F5FA;
}

nav {
  padding: 30px;

  a {
    font-weight: bold;
    color: #2c3e50;

    &.router-link-exact-active {
      color: #42b983;
    }
  }
}
.index-infon{
  position: absolute;
  top: 32px;
  right: 64px;
}

</style>
